<!doctype html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>标题</title>
<meta name='Keywords' content=''>
<meta name='Description' content=''>
<link rel='stylesheet' href='../css/fyz.public.style.css' />
<script type='text/javascript' src='../js/jquery-1.8.3.min.js'></script>
<style type='text/css'>
body{background:#EEEEEE;}
</style>
</head>
<body>
<style type="text/css">
div.LeftRightClickChangeBut{width:90px; height:80px; margin:0px auto;}
a.LeftRightClickChangeBut{display:inline-block; width:40px; height:60px; text-align:center; line-height:60px; color:#fff; background:#C8C8C8; font-size:25px; color:#fff; font-weight:bold; }
/**/
div.LeftRightClickChange{width:928px; height:177px; margin-top:30px; margin:0px auto; overflow:hidden; position:relative;}
ul.LeftRightClickChange li{width:227px; height:175px; border:1px solid #C8C8C8; text-align:center; font-family:'隶书'; font-size:30px; line-height:175px; margin-right:3px; cursor:pointer;}
ul.LeftRightClickChange li.liHover{background:#F88E8B;}
</style>
<div class="LeftRightClickChangeBut">                                            
    <a href="javascript:;" class="LeftRightClickChangeBut LeftRightClickChangeButLeft">&lt;</a>
    <a href="javascript:;" class="LeftRightClickChangeBut LeftRightClickChangeButRight">&gt;</a>
</div>
<div class="LeftRightClickChange">
    <div class="LeftRightClickChangeBox">
        <ul class="LeftRightClickChange">
            <li class='con liHover'>0</li>
            <li class='con'>1</li>
            <li class='con'>2</li>
            <li class='con'>3</li>
            <li class='con'>4</li>
            <li class='con'>5</li>
        </ul>
    </div>
</div>

<script type="text/javascript">
(function($){
    $.fn.extend({
        'LeftRightClickChange':function(options){
            var opts = $.extend({},LeftRightClickChange_defaluts,options);
            var $this  = $(this);            
			$thisAll = $this.find('*');
			$LeftRightClickChangeButRight = $(opts.LeftRightClickChangeButRight);
			$LeftRightClickChangeButLeft = $(opts.LeftRightClickChangeButLeft);
			$LeftRightClickChangeButRightAll = $(opts.LeftRightClickChangeButRight).find('*');
			$LeftRightClickChangeButLeftAll = $(opts.LeftRightClickChangeButLeft).find('*');
			/**/
			$this.parent().css({
				'height':'inherit'
			});
            $this.css({
            	'width':'1000%',
            	'height':'inherit',
            	'position':'absolute',
            	'top':'0px',
            	'left':'0px'
            });
            $this.find('li.con').css({
            	'float':'left'
            });          
            /**/
			opts.liSize = $this.find('li.con').size();
			opts.liWidth = $this.find('li.con').outerWidth(true);
			opts.leftOldTime = new Date();
			opts.rightOldTime = new Date();
			$this.find('li.con').live(opts.effect,function(){
				opts.liIndex = $(this).index();
				partCom();
			});
			$LeftRightClickChangeButRight.bind('click',function(){
				opts.rightNewTime = new Date();
				opts.betweenRightTime = opts.rightNewTime - opts.rightOldTime;				
				if(opts.setClickBetweenTime){
					if(opts.betweenRightTime>=opts.clickBetweenTime){						
						clickAdd();
					};
				}else{
					if(opts.betweenRightTime>=opts.animateTime){
						clickAdd();
					};
				};
				opts.rightOldTime = opts.rightNewTime;
			});
			$LeftRightClickChangeButLeft.live('click',function(){				
				opts.leftNewTime = new Date();
				opts.betweenLeftTime = opts.leftNewTime - opts.leftOldTime;
				if(opts.setClickBetweenTime){					
					if(opts.betweenLeftTime>=opts.clickBetweenTime){					
						LeftPartCom();
					};					
				}else{					
					if(opts.betweenLeftTime>=opts.animateTime){					
						LeftPartCom();
					};
				};
				function LeftPartCom(){
					opts.liIndex--;
					opts.onClickLeftFunction();
					if(opts.liIndex >= 0){
						if(opts.liIndex < (opts.liSize-opts.showSum)){
							opts.liLeft = -opts.liIndex*opts.liWidth+'px';
							$this.stop(true,true).animate({'left':opts.liLeft},opts.animateTime);
						};
					}else{
						opts.liIndex = (opts.liSize-1);
						opts.liLeft = -(opts.liIndex-(opts.showSum-1))*opts.liWidth+'px';
						$this.stop(true,true).animate({'left':opts.liLeft},opts.animateTime);
					};
					partCom();
				};
				opts.leftOldTime = opts.leftNewTime;
			});
			if(opts.autoPlay){
				function autoPlay(){
					clearInterval(opts.timer);
					opts.timer = setInterval(function(){clickAdd();},opts.setIntervalTime);
				};
				autoPlay();
				function clearIntervalFun(cleatIntervalObj){
					$(cleatIntervalObj).live('mouseover',function(){clearInterval(opts.timer);});
					$(cleatIntervalObj).live('mouseout',function(){autoPlay();});
				};
				clearIntervalFun($this);
				clearIntervalFun($thisAll);
				clearIntervalFun($LeftRightClickChangeButRight);
				clearIntervalFun($LeftRightClickChangeButLeft);
				clearIntervalFun($LeftRightClickChangeButRightAll);
				clearIntervalFun($LeftRightClickChangeButLeftAll);
			};
			function clickAdd(){
				opts.liIndex++;
				opts.onClickRightFunction();
				if(opts.liIndex <= opts.liSize-1){
					if(opts.liIndex>opts.showSum-1){
						opts.liLeft = '-'+(opts.liIndex-(opts.showSum-1))*opts.liWidth+'px';
						$this.stop(true,true).animate({'left':opts.liLeft},opts.animateTime);
					};
				}else{
					opts.liIndex = 0;
					opts.liLeft = '-'+(opts.liIndex)*opts.liWidth+'px';
					$this.stop(true,true).animate({'left':opts.liLeft},opts.animateTime);
				};				
				partCom();
			};
			function partCom(){
				$this.find('li').eq(opts.liIndex).addClass(opts.liHover).siblings('li').removeClass(opts.liHover);
			};
        }
    });
	var LeftRightClickChange_defaluts = {
		liSize:'',
		liWidth:'',
		liIndex:'',		
		liLeft:'',
		liHover:'liHover',
		leftOldTime:'',
		leftNewTime:'',
		rightOldTime:'',
		rightNewTime:'',
		betweenLeftTime:'',
		betweenRightTime:'',
		effect:'click',//hover or click
		autoPlay:true,
		setClickBetweenTime:true,//是否设置点击间隔时间，false表示默认点击时间间隔为animateTime
		clickBetweenTime:0,//设置点击时间间隔,只有当设置点击时间为true时才有效
		animateTime:500,
		setIntervalTime:1500,
		timer:null,
		showSum:4,
		LeftRightClickChangeButRight:'a.LeftRightClickChangeButRight',
		LeftRightClickChangeButLeft:'a.LeftRightClickChangeButLeft',
		onClickLeftFunction:function(){},
		onClickRightFunction:function(){}	
	};
}(window.jQuery));
</script>
<script type='text/javascript'>
var oIndex = 0;
var oLiSize = $('ul.LeftRightClickChange>li').size();
$('ul.LeftRightClickChange').LeftRightClickChange({
    autoPlay:false,
    showSum:4,
    animateTime:500,
    setIntervalTime:1500,
    effect:'click',//hover or click
    liHover:'liHover',//添加的类名,默认liHover
    setClickBetweenTime:true,//是否设置点击间隔时间，false表示默认点击时间间隔为animateTime
    clickBetweenTime:100,//设置点击时间间隔,只有当设置点击时间为true时才有效
    LeftRightClickChangeButRight:'a.LeftRightClickChangeButRight',
    LeftRightClickChangeButLeft:'a.LeftRightClickChangeButLeft',
	onClickRightFunction:function(){
        oIndex++;
        oIndex = oIndex%oLiSize;
    },
    onClickLeftFunction:function(){
        oIndex--;
        if(oIndex == -1){oIndex = oLiSize-1};
    }
});
</script>
<!-- <script type='text/javascript'>
(function(){
var oIndex = 0;
var oLiSize = $('ul.LeftRightClickChange>li').size();
$('ul.LeftRightClickChange').LeftRightClickChange({
    autoPlay:false,
    showSum:4,
    animateTime:500,
    setIntervalTime:1500,
    effect:'click',//hover or click
    liHover:'liHover',//添加的类名,默认liHover
    setClickBetweenTime:false,//是否设置点击间隔时间，false表示默认点击时间间隔为animateTime
    clickBetweenTime:100,//设置点击时间间隔,只有当设置点击时间为true时才有效
    LeftRightClickChangeButRight:'a.LeftRightClickChangeButRight',
    LeftRightClickChangeButLeft:'a.LeftRightClickChangeButLeft',
    onClickRightFunction:function(){
        oIndex++;
        oIndex = oIndex%oLiSize;
        console.log(oIndex);
    },
    onClickLeftFunction:function(){
        oIndex--;
        if(oIndex == -1){oIndex = oLiSize-1};
        console.log(oIndex);
    }
});
})();
</script> -->
</body>
</html>